<template>
	<view class="article-box flexC-FS-C">
		<view class="form-box card-project shadow-project">
			<view class="form-group">
				<view class="title flexR-FS-C">
					<i class="iconfont title_icon mr10">&#xe605;</i>
					{{params.enroll.name}}
				</view>
			</view>

			<view class="line"></view>

			<view class="form-group">
				<view class="title flexR-FS-C">
					<i class="iconfont title_icon mr10">&#xe8b8;</i>
					{{params.month}}
					{{params.selectedStart}} ~ {{params.selectedEndPoint}}
				</view>
			</view>
		</view>

		<view class="form-box card-project shadow-project margin-top">
			<view class="form-group mb20 mt20">
				<view class="line-desc">请您填写资料，带
					<text class="text-red">*</text>
					号为必填项
				</view>
			</view>
			<form>
				<view class="form-group form-line flexR-FS-C form-padding">
					<view class="title label">会议名称</view>
					<input class="uni-input" v-model="formData.name" name="input" placeholder="请输入会议名称" />
				</view>
				<view class="form-group form-line flexR-FS-C form-padding">
					<view class="title label">会议描述</view>
					<input class="uni-input" v-model="formData.des" name="input" placeholder="请输入会议描述" />
				</view>
				<view class="form-group form-line flexR-FS-C form-padding">
					<view class="title label">预订人</view>
					<input class="uni-input" v-model="formData.person" name="input" placeholder="请输入预订人" />
				</view>
				<view class="form-group form-line form-padding flexR-FS-C">
					<view class="title label">联系电话</view>
					<input class="uni-input" v-model="formData.phone" name="input" placeholder="请输入联系电话" />
				</view>
			</form>
		</view>

		<view @click="handleCheckYuyue" class="btn-base btn-project flexR-Cen">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {},
				formData: {
					name: '',
					des: '',
					person: '',
					phone: '',
				}
			}
		},

		onLoad(option) {
			this.params = {
				enroll: {
					name: '第一会议室',
					person: 10,
					tools: ['白板', '音箱']
				},
				month: '2024-12-20',
				selectedStart: "12:00",
				selectedEndPoint: "14:00"
			}
		},
		methods: {
			handleCheckYuyue() {
				console.log(1);
				uni.navigateTo({
					url: '/sub-meeting/enroll_my_join_detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.text-red {
		color: #FF6666;
	}

	.text-bold {
		font-weight: bold;
	}

	/*** 详情盒子 ***/
	.article-box {
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;
		box-sizing: border-box;

		.form-box {
			width: 700rpx;
			padding: 20rpx;
			background: #fff;
			box-sizing: border-box;
			margin: 20rpx 0 0 0;

			.form-group {
				font-size: 28rpx;

				.title {
					font-weight: bold;
					color: #333;

					.title_icon {
						color: #666;
					}
				}

				.label {
					width: 150rpx;
				}

				.line-desc {
					font-size: 28rpx;
					text-align: center;
					width: 100%;
					color: #666;
				}
			}

			.form-line {
				border-top: 2rpx solid #f1f1f1;
			}

			.form-padding {
				padding: 40rpx 0;
			}

			.line {
				width: 100%;
				height: 2rpx solid #f1f1f1;
			}
		}

		.card-project {
			border-radius: 10rpx !important;
		}

		.shadow-project {
			box-shadow: 6rpx 6rpx 8rpx rgba(216, 220, 223, 0.5);
		}
	}

	.submit-line {
		width: 100%;
	}

	.btn-base {
		width: 600rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 14rpx;
		color: #fff;
		background-color: #1A65FF;
		font-weight: bold;
		margin-top: 50rpx;
		margin-bottom: 100rpx;
	}
</style>